<script lang="ts" setup>
import { reactive, ref } from "vue";
import RequestSelect from "@/components/sofastui/requestSelect/RequestSelect.vue";

import { getObj, postObj, putObj } from "@/services/api/demo";
import va from "@/rules/index";
import { type FormInstance, type FormRules } from "element-plus";

const emits = defineEmits(["refreshDataList"]);

defineProps({
  options: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const formRef = ref<FormInstance>();

const formData = ref<{
  [key: string]: any;
}>({});

//引入自定义验证规则
const formRules = reactive<FormRules>({
  projectId: [va.required()],
  demandId: [va.required()],
  title: [va.required()],
  no: [va.required()],
  type: [va.required()],
  status: [va.required()],
});
// reactive 数据双向绑定
const saveLoading = ref(false);
const formDialog = reactive<{
  top: string;
  width: string;
  type: string;
  title: string;
  span: number;
  visible: boolean;
}>({
  top: "10vh",
  width: "1200px",
  type: "add",
  title: "新增",
  span: 12,
  visible: false,
});

const show = async (type: string, defaultData: any = {}) => {
  formDialog.type = type;
  if (type == "add") {
    formData.value = {
      ...defaultData,
    };
    formDialog.title = "新增";
    formDialog.visible = true;
  } else if (type == "update") {
    const { data } = await getObj(defaultData.id);
    formData.value = data;
    formDialog.title = "修改";
    formDialog.visible = true;
  } else if (type == "view") {
    const { data } = await getObj(defaultData.id);
    formData.value = data;
    formDialog.title = "查看";
    formDialog.visible = true;
  }
};
const saveForm = async (formEl: FormInstance | undefined) => {
  saveLoading.value = true;
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (formData.value?.id) {
        putObj(formData.value)
          .then(() => {
            saveSuccess("修改成功");
          })
          .catch(() => {
            saveLoading.value = false;
          });
      } else {
        postObj(formData.value)
          .then(() => {
            saveSuccess("添加成功");
          })
          .catch(() => {
            saveLoading.value = false;
          });
      }
    } else {
      console.log("error submit!", fields);
      saveLoading.value = false;
    }
  });
};

const saveSuccess = (message: string) => {
  saveLoading.value = false;
  ElMessage({
    type: "success",
    message,
  });
  formDialog.visible = false;
  emits("refreshDataList");
};

defineExpose({ show });
</script>

<template>
  <el-dialog :title="formDialog.title" v-model="formDialog.visible" :top="formDialog.top" :width="formDialog.width"
    :close-on-click-modal="false" :append-to-body="true">
    <el-form :model="formData" :rules="formRules" ref="formRef" label-width="90px" label-suffix=":"
      label-position="top">
      <el-row :gutter="20">
        <el-col :span="formDialog.span">
          <el-form-item label="相关项目" prop="projectId">
            <RequestSelect :request="{ url: '/devops/project' }" :props="{
              label: 'name',
              value: 'id',
              key: 'id',
              des: 'no',
            }" v-model="formData.projectId" placeholder="相关项目" @change="() => {
              formData.demandId = undefined;
            }
              " />
            <!-- <el-select style="width: 100%" v-model="formData.projectId" placeholder="相关项目">
                <el-option
                  v-for="item in options.projectDemandType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="formDialog.span">
          <el-form-item label="相关需求" prop="demandId">
            <RequestSelect :request="{ url: '/devops/projectdemand' }" :props="{
              label: 'title',
              value: 'id',
              key: 'id',
              params: {
                projectId: formData.projectId,
              },
            }" :disabled="!formData.projectId" v-model="formData.demandId" placeholder="相关需求" />
            <!-- <el-select style="width: 100%" v-model="formData.demandId" placeholder="相关需求">
                <el-option
                  v-for="item in options.projectDemandType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="formDialog.span">
          <el-form-item label="计划开始时间" prop="plannedStartTime">
            <el-date-picker style="width: 100%; display: flex" v-model="formData.plannedStartTime" type="date"
              placeholder="计划开始时间" />
          </el-form-item>
        </el-col>
        <el-col :span="formDialog.span">
          <el-form-item label="计划结束时间" prop="plannedEndTime">
            <el-date-picker style="width: 100%; display: flex" v-model="formData.plannedEndTime" type="date"
              placeholder="计划结束时间" />
          </el-form-item>
        </el-col>
        <el-col :span="formDialog.span">
          <el-form-item label="预计工时" prop="plannedTime">
            <el-input-number style="width: 100%" placeholder="(h)" v-model="formData.plannedTime" :min="0"
              controls-position="right" />
          </el-form-item>
        </el-col>
        <el-col :span="formDialog.span">
          <el-form-item label="实际工时" prop="actualTime">
            <el-input-number style="width: 100%" placeholder="(h)" v-model="formData.actualTime" :min="0"
              controls-position="right" />
          </el-form-item>
        </el-col>
        <el-col :span="formDialog.span">
          <el-form-item label="完成进度" prop="completionDegree">
            <el-input-number style="width: 100%; text-align: left" placeholder="完成进度0-100"
              v-model="formData.completionDegree" :min="0" :max="100" controls-position="right" />
          </el-form-item>
        </el-col>
        <el-col :span="formDialog.span">
          <el-form-item label="任务状态" prop="status">
            <el-select style="width: 100%" v-model="formData.status" placeholder="任务状态">
              <el-option v-for="item in options.projectDemandStatus" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24 || formDialog.span">
          <el-form-item label="工作内容" prop="content">
            <el-input v-model="formData.content" maxlength="100" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
              placeholder="工作内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24 || formDialog.span">
          <el-form-item label="需要的支持、风险、问题">
            <el-input v-model="formData.other" maxlength="100" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
              placeholder="需要的支持、风险、问题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24 || formDialog.span">
          <el-form-item label="备注">
            <el-input v-model="formData.desc" maxlength="100" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
              placeholder="备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveForm(formRef)" icon="CircleCheck" :loading="saveLoading">保 存</el-button>
        <el-button @click="formDialog.visible = false" icon="CircleClose">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
